<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>部门信息列表</title>

    <link rel="stylesheet" href="/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <!-- 如果web工程访问时，根URL地址不带工程的名称，即直接是“/”表示，则所有的js或css加载时，可以直接以“/”开头，这种方式的引入 称相对地址-->
    <!-- "/"表示，查找文件，直接以“webapp"作为根目录查找-->
    <script type="text/javascript" src="/plugins/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        var rows = 10;

        // 执行表单提交同时携带分页查询的条件
        function queryPage(page) {
            //动态修改表单的action
            // prop(xxxx,xxx):设置标签中存在的属性；  attr(xxx,xxx)：设置标签中存在的属性和自定义的属性
            $("#queryForm").prop("action", "/dept/findPage?page=" + page + "&rows=" + rows);
            $("#queryForm").submit();//提交表单
        }

        function save() {
            $("#deptForm").prop("action", "/dept/save");
            $("#deptForm").submit();
        }

        function initData(id, dname, loc) {
            $("#idInput").val(id);
            $("#dnameInput").val(dname);
            $("#locInput").val(loc);
        }

        function delDept(id) {
            if (confirm("确定执行删除操作？")) {
                $.get("/dept/delById?id=" + id, function (result) {
                    if (result.success) {
                        $("#myModal").modal("hide");
                        window.location.reload();
                    }else {
                        alert(result.message);
                    }
                });
            }
        }
    </script>
</head>
<body class="container" style="margin-top: 50px">
<!-- 引入bootstrap的面板效果-->
<div class="panel panel-primary">
    <div class="panel-heading">
        部门列表信息的查询
    </div>
    <div class="panel-body">
        <form id="queryForm" action="/dept/findPage" method="post" class="form-group form-inline">
            <input class="form-control" name="id" placeholder="请输入部门编号" value="${param.id}">
            <input class="form-control" name="dname" placeholder="输入部门名称" value="${param.dname}">
            <input class="form-control" name="loc" placeholder="请输入部门描述" value="${param.loc}">
            <input class="btn btn-success" type="button" value="查询" onclick="queryPage(${pageInfo.pageNum})">
            <input class="btn btn-primary" type="button" value="新增" data-toggle="modal" data-target="#myModal">

        </form>
        <table class="table table-hover table-striped">
            <tr>
                <th>部门编号</th>
                <th>部门名称</th>
                <th>部门描述</th>
                <th>操作</th>
            </tr>
            <c:forEach items="${pageInfo.list}" var="dept">
                <tr>
                    <td>${dept.id}</td>
                    <td>${dept.dname}</td>
                    <td>${dept.loc}</td>
                    <td>
                        <input class="btn btn-sm btn-warning" type="button" value="修改" data-toggle="modal"
                               data-target="#myModal" onclick="initData('${dept.id}','${dept.dname}','${dept.loc}')">
                        <input class="btn btn-sm btn-danger" type="button" value="删除" onclick="delDept('${dept.id}')">
                    </td>
                </tr>
            </c:forEach>
        </table>
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a class="btn ${pageInfo.hasPreviousPage ? '':'disabled'}" href="javascript:void(0)"
                       aria-label="上一页" onclick="queryPage(${pageInfo.prePage})">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <c:forEach begin="${pageInfo.pageNum -2 <= 0 ? 1:(pageInfo.pageNum - 2)}"
                           end="${pageInfo.pageNum +2 >= pageInfo.pages ? pageInfo.pages:(pageInfo.pageNum + 2) }"
                           var="page">
                    <li class="${page == pageInfo.pageNum ? 'active':''}"><a href="javascript:void(0)"
                                                                             onclick="queryPage(${page})">${page}</a>
                    </li>
                </c:forEach>
                <li>
                    <a class="btn ${pageInfo.hasNextPage ? '':'disabled'}" href="javascript:void(0)"
                       onclick="queryPage(${pageInfo.nextPage})" aria-label="下一页">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">新增部门信息</h4>
            </div>
            <div class="modal-body">
                <form id="deptForm">
                    <input id="idInput" type="hidden" name="id">
                    <div class="form-group">
                        <input id="dnameInput" class="form-control" placeholder="请输入部门名称" name="dname">
                    </div>
                    <div class="form-group">
                        <input id="locInput" class="form-control" placeholder="请输入部门描述" name="loc">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="save()">保存</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
